<template>
  <div class="comtainer">
    <el-dialog :title="dataForm.id ? '编辑': '创建'" :close-on-click-modal="false"
               :visible.sync="visible" class="consignProd-add-upd" width="40%" @close="closeDialog">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="left" label-width="140px"
               style="width:620px; margin-left:50px;">
        <!-- 选择商品 -->

        <el-form-item style="margin-bottom:25px">
          <el-button plain @click="select()">选择商品</el-button>
        </el-form-item>
        <el-form-item label="商品名称：" prop="prodName">
          <el-input
            v-model="dataForm.prodName"
            type="text"
            placeholder="请选择商品"
            disabled
            style="width: auto"
          />
        </el-form-item>
        <el-form-item label="商品id：" prop="prodId">
          <el-input
            v-model="dataForm.prodId"
            type="text"
            placeholder="请选择商品"
            disabled
            style="width: auto"
          />
        </el-form-item>
        <el-form-item label="发行价格：" prop="price" v-if="!dataForm.id">
          <el-input
            v-model="dataForm.price"
            type="text"
            disabled
            style="width: auto"
          />
        </el-form-item>
        <el-form-item label="最低价（元）：" prop="low">
          <el-input-number
            v-model="dataForm.low"
            controls-position="right"
            :step="0.01"
            :precision="2"
            :min="0.00"
          />
        </el-form-item>
        <el-form-item label="最高价（元）：" prop="high">
          <el-input-number
            v-model="dataForm.high"
            controls-position="right"
            :step="0.01"
            :precision="2"
            :min="0.00"
            :max="1000000.00"
          />
        </el-form-item>
        <el-form-item label="流通量：" prop="circulateNum">
          <el-input-number
            v-model="dataForm.circulateNum"
            controls-position="right"
          />
          <span style="color: #ff0000; font-size: 12px; margin-left: 4px">不输入时系统计算，输入时以输入为准</span>
        </el-form-item>
<!--        <el-form-item label="发行方费率%：" prop="issuerRate">
          <el-input-number
            v-model="dataForm.issuerRate"
            controls-position="right"
            :step="0.01"
            :precision="2"
            :min="0.00"
            :max="100.00"
          />
        </el-form-item>
        <el-form-item label="平台费率%：" prop="platformRate">
          <el-input-number
            v-model="dataForm.platformRate"
            controls-position="right"
            :step="0.01"
            :precision="2"
            :min="0.00"
            :max="100.00"
          />
        </el-form-item>
        <el-form-item label="结算周期：" prop="settleDays">
          <el-input
            v-model="dataForm.settleDays"
            type="text"
            placeholder="请输入天数"
            style="width: 180px"
          />
          天<span style="color: #ff0000; font-size: 12px; margin-left: 4px">（周期设为0时，既是实时结算）</span>
        </el-form-item>-->
        <el-form-item label="寄售状态：" prop="status">
          <el-switch
            v-model="dataForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="2"
            :inactive-value="1"
            active-text="开启"
            inactive-text="关闭">
          </el-switch>
        </el-form-item>
        <el-form-item label="是否开启白名单" prop="isWhitelist">
          <el-radio-group v-model="dataForm.isWhitelist" size="small">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="白名单手机号：" prop="phoneWhitelist">
          <el-input
            v-model="dataForm.phoneWhitelist"
            type="text"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dataFormSubmit()">
          确认
        </el-button>
      </div>
      <!--      <selectProd ref="selectShopCholdren" :is-check-line="false"/>-->

      <!-- 商品选择弹窗-->
      <prods-select
        v-if="prodsSelectVisible"
        ref="prodsSelect"
        :isSingle="true"
        :prodType="0"
        @refreshSelectProds="selectSeckillProd"
      ></prods-select>
    </el-dialog>
  </div>
</template>

<script>
import ProdsSelect from '@/components/prods-select'

export default {
  components: {ProdsSelect},
  data () {
    return {
      visible: false,
      prodsSelectVisible: false,
      consignStatus: 1,
      prod: null,
      dataForm: {
        id: null,
        prodId: null,
        prodName: null,
        prodImg: null,
        price: null,
        lowPrice: null,
        highPrice: null,
        circulateNum: null,
        low: null,
        high: null,
        issuerRate: null,
        platformRate: null,
        status: 1,
        isWhitelist: 0,
        phoneWhitelist: null,
        remarks: null,
        settleDays: null
      },
      rules: {
        prodName: [{required: true, message: '请选择商品', trigger: 'blur'}],
        low: [{required: true, message: '请输入最低价', trigger: 'blur'}, {
          validator: (rule, value, callBack) => {
            if (value < 0.01) {
              callBack('请输入最低价')
            }
            callBack()
          }
        }],
        high: [{required: true, message: '请输入最高价', trigger: 'blur'}, {
          validator: (rule, value, callBack) => {
            if (value < 0.01) {
              callBack('请输入最高价')
            }
            callBack()
          }
        }]
        // circulateNum: [{ required: true, message: '请输入流通量', trigger: 'blur' }, {
        //   validator: (rule, value, callBack) => {
        //     if (value < 1) {
        //       callBack('请输入流通量')
        //     }
        //     callBack()
        //   }
        // }],
       /*  settleDays: [{required: true, pattern: /^[0-9]\d*$/, message: '请输入非负整数', trigger: 'blur'}] */
      }
    }
  },
  methods: {
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (!this.dataForm.id) {
          return
        }
        this.$http({
          url: this.$http.adornUrl('/admin/consign/prod/getInfo'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign({id: id}
            )
          )
        }).then(({data}) => {
          this.dataForm = data
          this.dataForm.low = data.lowPrice / 100
          this.dataForm.high = data.highPrice / 100
        })
      })
    },

    // 添加指定商品
    selectSeckillProd (prods) {
      if (prods) {
        this.dataForm.prodId = prods.prodId
        this.dataForm.prodName = prods.prodName
        this.dataForm.prodImg = prods.pic
        this.dataForm.price = prods.price
      }
    },
    // 选择商品
    select () {
      this.prodsSelectVisible = true
      this.$nextTick(() => {
        this.$refs.prodsSelect.init(this.dataForm.prodId)
      })

      // this.$refs.selectShopCholdren.dialogTableVisible = true
    },

    // 关闭dialog时
    closeDialog () {
      this.dataForm = {
        id: null,
        prodId: null,
        prodName: null,
        prodImg: null,
        price: null,
        lowPrice: null,
        highPrice: null,
        low: null,
        high: null,
        circulateNum: null,
        issuerRate: null,
        platformRate: null,
        status: 1,
        remarks: null,
        settleDays: null,
        isWhitelist: 0,
        phoneWhitelist: null,
      }
    },

    // 表单提交
    dataFormSubmit () {
      this.$refs.dataForm.validate(valid => {
        if (!valid) {
          return
        }
        this.dataForm.lowPrice = this.dataForm.low * 100
        this.dataForm.highPrice = this.dataForm.high * 100
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl('/admin/consign/prod'),
            method: 'put',
            data: this.$http.adornData(this.dataForm)
          }).then(({data}) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
                this.$refs['dataForm'].resetFields()
              }
            })
          })
        } else {
          this.$http({
            url: this.$http.adornUrl('/admin/consign/prod'),
            method: 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({data}) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
                this.$refs['dataForm'].resetFields()
              }
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
p {
  margin: 0;
}

.consignProd-add-upd {
  .el-form-item.el-form-item--medium {
    .el-form-item--medium .el-form-item__label {
      text-align: right !important;
    }
  }
}
</style>
